<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="考勤类型" :label-width="formLabelWidth" prop="type">
        <fortress-select
            v-model="form.type"
            :dictList="AttendanceType_oaList"
            placeholder="请选择考勤类型"
            clearable
        ></fortress-select>
      </el-form-item>
      <el-form-item label="规则名称" :label-width="formLabelWidth" prop="name">
        <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入规则名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="打卡人员/部门" :label-width="formLabelWidth" prop="personnel">
        <v-auditer title="打卡人员/部门" v-model="form.personnel"></v-auditer>
      </el-form-item>
      <el-form-item label="白名单人员" :label-width="formLabelWidth" prop="white">
        <v-auditer title="白名单人员" v-model="form.white"></v-auditer>
      </el-form-item>
      <el-form-item label="提醒时间(分钟)" :label-width="formLabelWidth" prop="remind">
        <el-input-number
            value="0"
            v-model="form.remind"
        ></el-input-number>
      </el-form-item>
      <!--      <el-form-item label="考勤地点文字描述" :label-width="formLabelWidth" prop="address">-->
      <!--        <el-input-->
      <!--            v-model="form.address"-->
      <!--            autocomplete="off"-->
      <!--            placeholder="请输入考勤地点文字描述"-->
      <!--        ></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item label="考勤地点(经纬度)" :label-width="formLabelWidth" v-show="form.type==1" prop="addressRange">
        <fortress-map ref="addressRange" @ftmap="onMapChange" :center="form.range"></fortress-map>
      </el-form-item>
      <el-form-item label="考勤距离(米)" :label-width="formLabelWidth" v-show="form.type==1" prop="distance">
        <el-input-number
            v-model="form.distance"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="权重排序" :label-width="formLabelWidth" prop="sort">
        <el-input-number
            v-model="form.sort"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="是否需要申请" :label-width="formLabelWidth" v-show="form.type==2" prop="isApply">
        <el-switch
            v-model="form.isApply"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
        ></el-switch>
      </el-form-item>
      <el-form-item label="是否需要拍照" :label-width="formLabelWidth" v-show="form.type==2" prop="isPhoto">
        <el-switch
            v-model="form.isPhoto"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
        ></el-switch>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
        <el-switch
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
        ></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
      <el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {attendancesettingInfo, attendancesettingSave, attendancesettingEdit} from "@/api/oa/attendancesetting.js";
import {enumList,} from "@/api/public.api.js";
import * as ftVal from "@/common/fortressValidator.js";

export default {
  data() {
    return {
      visible: false,
      form: {
        type: 1,
        name: "",
        personnel: {
          dept: [],
          user: [],
        },
        remind: "",
        white: {
          user: [],
        },
        address: "",
        addressRange: "",
        distance: "",
        isApply: "2",
        isPhoto: "2",
        sort: "",
        status: "2",
      },
      formLabelWidth: "120px",
      rules: {
        type: [
          {required: true, message: "请输入考勤类型", trigger: "blur"},
        ],
        name: [
          {required: true, message: "请输入规则名称", trigger: "blur"},
        ],
        // personnel: [
        //   {required: true, message: "请输入打卡人员/部门", trigger: "blur"},
        // ],
        // remind: [
        //   {required: true, message: "请输入提醒时间(分钟)", trigger: "blur"},
        //   {validator: ftVal.validatePInteger, trigger: "blur"},
        // ],
        // address: [
        //   {required: true, message: "请输入考勤地点文字描述", trigger: "blur"},
        // ],
        // addressRange: [
        //   {required: true, message: "请输入考勤地点(经纬度)", trigger: "blur"},
        // ],
        distance: [
          {required: true, message: "请输入考勤距离(米)", trigger: "blur"},
          {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
        isApply: [
          {required: true, message: "请输入是否需要申请", trigger: "blur"},
        ],
        isPhoto: [
          {required: true, message: "请输入是否需要拍照", trigger: "blur"},
        ],
        sort: [
          {required: true, message: "请输入权重排序", trigger: "blur"},
          {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
        status: [
          {required: true, message: "请输入状态", trigger: "blur"},
        ],
      },
      AttendanceType_oaList: [],
      YesNoList: [],
    };
  },
  created() {
  },
  methods: {
    onMapChange(center, address, searchKey) {
      this.form.address = address;
      this.form.addressRange = center.join(",")
    },
    queryEnumList() {
      this.AttendanceType_oaList = [];
      enumList("AttendanceType", "oa").then((resp) => {
        if (resp.code == 0) {
          this.AttendanceType_oaList = resp.data;
        }
      });
      this.YesNoList = [];
      enumList("YesNo", "").then((resp) => {
        if (resp.code == 0) {
          this.YesNoList = resp.data;
        }
      });
    },
    init(id) {
      this.resetForm();
      this.queryEnumList();
      //修改
      if (id) {
        attendancesettingInfo(id).then((resp) => {
          if (resp.code == 0) {
            this.$nextTick(() => {
              let personnelUserStr = resp.data.personnel.split("SPLIT")[0];
              let personnelDeptStr = resp.data.personnel.split("SPLIT")[1];
              let personnel = {
                dept: [],
                user: [],
              }
              if (personnelUserStr != "") {
                personnel.user = personnelUserStr.split(",");
              }
              if (personnelDeptStr != "") {
                personnel.dept = personnelDeptStr.split(",");
              }
              let white = {
                user: [],
              }
              white.user = resp.data.white.split(",");
              this.$refs.addressRange.center = resp.data.addressRange;
              this.form = {
                ...this.form,
                ...resp.data,
                personnel,
                white,
                addressRange: resp.data.addressRange.split(",")
              };
            });
          } else {
            this.$msg({
              message: resp.msg,
              type: "error",
            });
          }
        });
      }
      this.visible = true;
    },
    //提交表单数据
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const personnel = this.form.personnel.user.join(",").concat("SPLIT").concat(this.form.personnel.dept.join(","));
          const white = this.form.white.user.join(",");
          if (Array.isArray(this.form.addressRange)) {
            this.form.addressRange = this.form.addressRange.join(",")
          }
          //修改
          if (this.form.id) {
            attendancesettingEdit({
              ...this.form,
              personnel,
              white,
            }).then((resp) => {

              if (resp.code == 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$emit("refreshData");
                this.visible = false;
              } else {
                this.$msg({
                  message: resp.msg,
                  type: "error",
                });
              }
            });
            //新增
          } else {
            attendancesettingSave({
              ...this.form,
              personnel,
              white,
            }).then((resp) => {
              if (resp.code == 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$emit("refreshData");
                this.visible = false;
              } else {
                this.$msg({
                  message: resp.msg,
                  type: "error",
                });
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.form = {
        type: 1,
        name: "",
        personnel: {
          dept: [],
          user: [],
        },
        remind: "",
        white: {
          user: [],
        },
        address: "",
        addressRange: "",
        distance: "",
        isApply: "2",
        isPhoto: "2",
        sort: "",
        status: "2",
      };
      this.$nextTick(() => {
        if (this.$refs["form"]) {
          this.$refs["form"].resetFields();
        }
      });
    },
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 274px;
  padding: 7px;
  overflow: hidden;
  overflow-y: auto;
  font-weight: normal;
}
</style>
